<template>
    <div class="tab-container">
        <oa-tab-item :number="item.number" :selected="select == index" @click="tabItemClick(item,index)"
                     v-for="(item,index) in tabs"
                     :label="item.label"
                     :show-tips="item.show_tips"
                     :icon="item.icon" :key="`tab-item-${index}`"/>
    </div>
</template>

<script>
    import OaTabItem from "./oa-tab-item";

    export default {
        components: {OaTabItem},
        name: "oa-tabbar",
        props: {
            tabs: {
                type: Array,
                default: []
            },
            select: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {}
        },
        methods: {
            tabItemClick(item, index) {
                console.log(item, index)
                this.$emit("tabItemClick", item, index)
            }
        }

    }
</script>

<style scoped lang="less">
    .tab-container {
        background: #ffffff;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        border-top: solid 1px #e0e0e0;
    }
</style>